<template>
  <div class="data_warp">
    <el-row type="flex" :gutter="20">
      <el-col :span="6"
        ><div>
          <el-tree
            ref="projectTree"
            :data="dataList"
            node-key="code"
            :props="defaultProps"
            @node-click="handleNodeClick"
            :default-checked-keys="currentProject"
            :current-node-key="projectCode"
            check-strictly
            default-expand-all
            highlight-current
          ></el-tree></div
      ></el-col>
      <el-col :span="18">
        <div class="video-wrap">
          <div
            class="video-box"
            v-for="(item, index) in videoList"
            :key="item.id"
          >
            <video
              :id="setId(item.id)"
              class="video-js vjs-default-skin"
              playsinline
              autoplay="autoplay"
            >
              <source :src="item.playUrl" type="application/x-mpegURL" />
            </video>
          </div>
        </div>
      </el-col>
    </el-row>
    <!-- pagination -->
    <el-pagination
      v-if="videoList.length > 0"
      :page-size="pageSize"
      @size-change="sizeChangeHandle"
      @current-change="currentChangeHandle"
      :current-page="pageIndex"
      background
      layout="prev, pager, next"
      :total="total"
    >
    </el-pagination>
  </div>
</template>
<script>
import videojs from "video.js";
import "video.js/dist/video-js.css";
export default {
  data() {
    return {
      projectCode: "",
      dataList: [],
      addForm: {}, //填表
      currentProject: [],
      currentCheck: "",
      defaultProps: {
        children: "projects",
        label: "name"
      },
      pageIndex: 1,
      pageSize: 4,
      total: 0,
      videoList: [],
      options: {
        autoplay: true, // 设置自动播放
        muted: true, // 设置了它为true，才可实现自动播放,同时视频也被静音（Chrome66及以上版本，禁止音视频的自动播放）
        preload: "auto", // 预加载
        controls: true // 显示播放的控件
      },
      videoRef: [],
      sos: 1
    };
  },
  components: {},
  watch: {
    projectCode: {
      immediate: true,
      handler(value) {
        if (value.toString()) {
          // setCurrentKey函数必须放到$nextTick里面，否则tree还未渲染上，找不到tree
          this.$nextTick(() => {
            this.$refs["projectTree"].setCurrentKey(value);
          });
        }
      }
    }
  },
  created() {
    this.companyProjectList();
  },
  mounted() {
      
  },
  methods: {
    // 每页数
    sizeChangeHandle(val) {
      this.pageSize = val;
      this.pageIndex = 1;
      this.getVideoByProject();
    },
    // 当前页
    currentChangeHandle(val) {
      this.pageIndex = val;
      this.getVideoByProject();
    },
    initVideo() {
      this.$nextTick(() => {
        setTimeout(() => {
          this.videoList.forEach((item, index) => {
            let dom = this.setId(item.id);
            this.videoRef.push(videojs(dom, this.options));
          });
        }, 500);
      });
    },
    setId(index) {
      return "player-" + index;
    },
    // 获取集团
    companyProjectList() {
      this.$http({
        url: this.$http.adornUrl(`/largeScreen/companyProjectList`),
        method: "get"
      }).then(({ data }) => {
        if (data && data.code === 0) {
        }
        this.dataList = data.data;
        this.projectCode = this.dataList[0].projects[0].code;
        this.$nextTick(()=>{
          this.getVideoByProject()
        })
      });
    },
    // 获取项目code
    handleNodeClick(e) {
      if (!e.projects) {
        this.pageIndex = 1;
        this.projectCode = e.code;
        this.getVideoByProject(e.code);
      }
    },
    //根据集团获取视频
    getVideoByProject(code) {
      if (this.videoRef.length > 0) {
        console.log(this.videoRef);
        this.videoRef.forEach((videoItem, videoIndex) => {
          videoItem.pause();
          videoItem.dispose();
        });
        this.videoRef = [];
      }
      this.$http({
        url: this.$http.adornUrl("/sys/bvideodevice/list"),
        method: "get",
        params: this.$http.adornParams({
          page: this.pageIndex,
          limit: this.pageSize,
          // deviceType: this.dataForm.deviceType,
          // status: this.dataForm.status,
          projectCode: code || this.projectCode
          // name: this.dataForm.name
        })
      }).then(res => {
        if (res.data.code === 0) {
          this.videoList = res.data.page.list;
          this.total = res.data.page.totalCount;
          // this.sos += 1;
          // if (this.sos === 3) {
          //   return;
          // }
          this.$nextTick(() => {
            this.initVideo();
          });
        }
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.video-wrap {
  display: flex;
  flex-wrap: wrap;
  .video-box {
    position: relative;
    flex: 0 0 49%;
    height: 0;
    margin: 1%;
    padding-bottom: 27.56%;

    &:nth-child(2n-1) {
      margin-left: 0;
    }
    &:nth-child(2n) {
      margin-right: 0;
    }

    /* CSS */
    .video-js.vjs-default-skin {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
    }

    video {
      width: 100%;
      height: 100%;
    }
  }
}
</style>
